<template>
  <el-dialog :visible.sync="is_show" title="添加用户到职位" :before-close="handleClose">
    <div class="operation search-head">
      <form class="operation-search-form" @submit.prevent="searchUser">
        <el-input placeholder="请输入职员姓名" v-model="search_name">
          <el-button slot="append" icon="el-icon-search" @click="searchUser"></el-button>
        </el-input>
      </form>
    </div>
    <el-table :data="data.rows.td" v-if="data && data.rows" @selection-change="handleSelectionChange">
      <el-table-column type="selection"></el-table-column>
      <el-table-column v-for="(item, index) in data.rows.th" :key="index" :prop="item.key" :label="item.label"></el-table-column>
    </el-table>
    <el-pagination v-if="data" @current-change="handleCurrentChange" background :current-page="1" :page-size="10" prev-text="上一页" next-text="下一页" layout="total, prev, pager, next, jumper" :total="data.total"></el-pagination>
    <div style="text-align:center;margin-top: 15px;">
      <el-button @click="handleClose">取消</el-button>
      <el-button @click="onSubmit" type="primary">确定</el-button>
    </div>
  </el-dialog>
</template>

<script>
import role from "@/api/role.js";

export default {
  name: "wait-add-user-list",
  props: ["data", "is_show", "roleId"],
  data() {
    return {
      wait_arr: undefined,
      search_name: undefined
    };
  },
  methods: {
    handleClose({val} = {val: false}) {
      // 接收一个参数，是否成功添加!默认false
      // this.$emit("changeIsShow", false);
      this.$emit("changeIsShow", [false, val])
    },
    handleSelectionChange(arr) {
      let new_arr = [];
      for (let i = 0, len = arr.length; i < len; i++) {
        new_arr.push(arr[i].userid);
      }
      this.wait_arr = new_arr;
      new_arr = null;
    },
    handleCurrentChange(val) {
      this.$emit("handleCurrentChange", { name: this.search_name, val: val });
      this.search_name = undefined;
    },
    async onSubmit() {
      if (this.roleId == "manage") {
        await role
          .addManagerUser({ ids: this.wait_arr })
          .then(res => {
            this.$message({
              type: "success",
              message: "添加成功!"
            });
            this.handleClose({val: true});
            // this.$store.dispatch("role/getRoleList");
          })
          .catch(err => {
            this.$message.error(err);
          this.handleClose();
          });
      } else {
        await role
          .addUserIntoRole({ roleId: this.roleId, ids: this.wait_arr })
          .then(res => {
            this.$message({
              type: "success",
              message: "添加成功!"
            });
            // this.$store.dispatch("role/getRoleList");
            this.handleClose({val: true});
          })
          .catch(err => {
            this.$message.error(err);
            this.handleClose();
          });
      }
    },
    searchUser() {
      this.handleCurrentChange(1);
    }
  }
};
</script>

<style>
</style>
